import { Canvas } from "@react-three/fiber";
import { OrbitControls, Effects } from "@react-three/drei";

import { useSetState } from 'ahooks'
import { ThreeContext } from "./context";
import { useEffect, useRef } from "react";



function ThreeProvider(props: React.PropsWithChildren) {

    const [state, setState] = useSetState({
        scene: null,
        camera: null,
        renderer: null,
        controls: null,
    })

    const canvasRef = useRef<HTMLCanvasElement>(null)




    useEffect(() => {
        if (canvasRef.current) {
            console.log(canvasRef)
        }
        console.log(canvasRef)
    }, [])




    return (
        <div className="w-screen h-screen">
            <Canvas ref={canvasRef}>
                <OrbitControls />
                <Effects>
                </Effects>
            </Canvas>
            <ThreeContext.Provider value={state}>
                <div>
                    {props.children}
                </div>
            </ThreeContext.Provider>
        </div>
    )
}

export default ThreeProvider
